<template>
  <div id="index">
    <div class="wrapper">
      <div class="muen-wrapper">
        <div class="muen-list-wrapper" ref="wrapper">
          <div class="muen-list">
            <div ref="muenlist" class="muen" :id="item.id" v-for="(item, index) in leftlist" :key="index" @click="doThis(index)" :class="{'muenActive':menuCurrentIndex===index}">
              {{item.areaname}}
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="top-wrapper" ref="list">
          <ul class="top-list" ref="topList">
            <li class="top-muen" :id="item.id" v-for="(item, index) in toplist" :key="index" ref="topmuen" @click="opentop(index)" :class="{'top-muen-active':topCurrentIndex===index}">
              {{item.typename}}
            </li>
          </ul>
        </div>
        <div class="bootom-wrapper">
          <div class="conter-list-wrapper" ref="conterlist">
            <div class="conter-list">
              <div class="conter-box" :id="item.id" v-for="(item, id) in bootmlist" :key="id" @click="goto(item.contents)">
                <div class="conterleft">
                  <img :src="item.titleimg">
                </div>
                <div class="conterright">
                  <div class="conter-title">
                    {{item.title}}
                  </div>
                  <p class="conter-text">
                    {{item.describe}}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import apis from '../../../static/js/apis'

export default {
  created () {
    this.Raiders()
  },
  methods: {
    Raiders () {
      this.$axios
        .post(
          apis + '/shenglian-fast/app/weixinapp/articletype'
        )
        .then(response => {
          if (response.data.msg === 'success') {
            let data = response.data
            this.leftlist = data.arealist
            this.toplist = data.typelist
            this.leftid = this.leftlist[0].id
            this.typeid = this.toplist[0].id
            this.$nextTick(() => {
              this._initScroll()
            })
            this.Raiderslist()
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    Raiderslist () {
      // console.log(this.leftid)
      // console.log(this.typeid)
      this.$axios
        .post(
          apis + '/shenglian-fast/app/weixinapp/articlelist',
          {
            areaid: this.leftid,
            typeid: this.typeid
          }
        )
        .then(response => {
          if (response.data.msg === 'success') {
            let data = response.data
            this.bootmlist = data.articlelist
            // console.log(this.bootmlist)
          } else {
            this.$dialog.toast({mes: '数据错误，请联系管理员', timeout: 1000})
          }
        })
        .catch(error => {
          console.log(error)
          this.$dialog.toast({mes: '服务器异常，稍后再试！', timeout: 1000})
        })
    },
    _initScroll () {
      this.meunScroll = new BScroll(this.$refs.wrapper, {
        scrollY: true,
        click: true
      })
      let picWidth = 75
      let margin = 8
      let width = (picWidth + margin) * this.toplist.length + margin
      this.$refs.topList.style.width = width + 'px'
      this.foodsScroll = new BScroll(this.$refs.list, {
        scrollX: true,
        click: true
      })
      this.centerScroll = new BScroll(this.$refs.conterlist, {
        scrollY: true,
        click: true
      })
    },
    doThis (index) {
      this.leftid = this.leftlist[index].id
      this.menuCurrentIndex = index
      this.Raiderslist()
    },
    opentop (index) {
      this.topCurrentIndex = index
      this.typeid = this.toplist[index].id
      this.Raiderslist()
    },
    goto (index) {
      window.location.href = index
    }
  },
  data () {
    return {
      leftlist: [],
      toplist: [],
      bootmlist: [],
      typeid: '',
      menuCurrentIndex: 0,
      topCurrentIndex: 0,
      leftid: ''
    }
  },
  components: {
    apis
  }
}
</script>

<style scoped>
  .wrapper {
    width: 100%;
    overflow: hidden;
    display: flex;
  }
  .muen-wrapper {
    flex: 0 0 100px;
    overflow: hidden;
    margin-right: 8px;
  }
  .muen-list-wrapper {
    position: fixed;
    width: 100px;
    top: 0;
    bottom: 0;
    overflow: hidden;
    background: #fff;
  }
  .center {
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
  }
  .muen-list {
    width: 100%;
    overflow: hidden;
  }
  .muen {
    padding: 30px 0;
    text-align: center;
    font-size: 14px;
    color: #333;
  }
  .muenActive {
    background: #f5f5f5;
  }
  .top-wrapper {
    width: 100%;
    overflow-x: hidden;
    padding: 13px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #d7d7d7;
  }
  .top-list {
    overflow: hidden;
    height: 47px;
    box-sizing: border-box;
  }
  .top-muen {
    border: #d7d7d7 1px solid;
    margin-right: 8px;
    height: 47px;
    box-sizing: border-box;
    line-height: 47px;
    font-size: 14px;
    color: #d7d7d7;
    width: 75px;
    text-align: center;
    display: inline-block;
  }
  .top-muen-active {
    border: #92d4ef 1px solid;
    color: #fff;
    background: #92d4ef;
  }
  .conter-list-wrapper {
    overflow: hidden;
    box-sizing: border-box;
    position: fixed;
    left: 108px;
    top: 74px;
    bottom: 0;
    width: 100%;
  }
  .conter-list {
    width: 100%;
    padding: 18px 8px 18px 0;
    box-sizing: border-box;
  }
  .conter-box {
    display: flex;
    box-shadow: rgba(227, 227, 227, 0.7) 0px 4px 40px;
    margin-bottom: 8px;
    height: 75px;
  }
  .conterleft {
    flex: 0 0 75px;
    overflow: hidden;
  }
  .conterleft img {
    width: 100%;
    height: 100%;
  }
  .conterright {
    flex: 1;
    padding: 0 12px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
  }
  .conter-title {
    font-size: 14px;
    color: #92d4ef;
    margin: 10px 0;
  }
  .conter-text {
    font-size: 12px;
    color: #999;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
</style>
